<template>
  <el-drawer
    :size="drawerSize"
    :visible.sync="drawer"
    :with-header="false"
    direction="ltr"
    title="我是标题"
    @close="beforeClose">

    <div class="block" style="margin:10px;">
      <div v-if="!loading && subjectItemlist.length == 0" style="text-align: center;font-size: 16px;">空空如也</div>

      <div v-if="loading" class="lds-css ng-scope">
        <div class="lds-facebook" style="width:100%;height:100%">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <el-timeline>
        <div class="blogsbox">
          <div
            v-for="item in subjectItemlist"
            :key="item.uid"
            class="blogs"
          >
            <el-timeline-item :timestamp="item.blog.createTime" placement="top">
              <el-card>
                <span class="blogpic" @click="goToInfo(item.blog.uid)">
                  <a href="javascript:void(0);" title>
                    <img v-if="item.blog && item.blog.photoList" :src="item.blog.photoList[0]" alt>
                  </a>
                </span>
                <p class="blogtext" style="font-weight: bold; cursor: pointer;" @click="goToInfo(item.blog.uid)">
                  {{ item.blog.title }}</p>
                <p class="blogtext" style="margin-top: 10px;-webkit-box-orient: vertical" v-html="item.blog.summary">
                  {{ item.blog.summary }}</p>
                <div class="bloginfo">
                  <ul>
                    <li class="author">
                      <span class="iconfont">&#xe60f;</span>
                      <a href="javascript:void(0);" @click="goToAuthor(item.blog.author)">{{ item.blog.author }}</a>
                    </li>
                    <li v-if="item.blog.blogSort" class="lmname">
                      <span class="iconfont">&#xe603;</span>
                      <a
                        href="javascript:void(0);"
                        @click="goToList(item.blog.blogSort.uid)"
                      >{{ item.blog.blogSort.sortName }}</a>
                    </li>
                    <li class="view">
                      <span class="iconfont">&#xe8c7;</span>
                      <span>{{ item.blog.clickCount }}</span>
                    </li>
                    <li class="like">
                      <span class="iconfont">&#xe663;</span>
                      {{ item.blog.collectCount }}
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-timeline-item>
          </div>
        </div>
      </el-timeline>
    </div>

  </el-drawer>
</template>

<script>
import {getSubjectItemList} from "../../api/subject";

export default {
  name: "SubjectItemList",
  props: ["visiable", "subjectUid"],
  watch: {
    visiable: function () {
      this.drawer = this.visiable;
    },
    subjectUid: function () {
      this.currentPage = 1
      this.subjectItemlist = []
      this.getList()
    }
  },
  data() {
    return {
      drawer: this.visiable,
      subjectItemlist: [],
      pageSize: 50,
      currentPage: 1,
      total: 0,
      loading: true,
      drawerSize: "30%"
    };
  },
  created() {
    // this.getList()
  },
  mounted() {
    // 获取宽高
    window.onresize = () => {
      return (() => {
        this.resizeWin();
      })();
    };
    this.resizeWin();
  },
  methods: {
    getList() {
      var params = {};
      params.subjectUid = this.subjectUid;
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      this.loading = true
      getSubjectItemList(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          let itemList = response.data.records
          let oldItemList = this.subjectItemlist
          this.currentPage = response.data.current
          this.total = response.data.total
          this.subjectItemlist = oldItemList.concat(itemList);
        }
        this.loading = false
      })
    },
    resizeWin() {
      //当前window 宽
      let centerWidth = document.documentElement.scrollWidth;
      if (centerWidth > 1300) {
        this.drawerSize = "30%"
      } else if (centerWidth > 1000) {
        this.drawerSize = "50%"
      } else if (centerWidth > 600) {
        this.drawerSize = "60%"
      } else {
        this.drawerSize = "95%"
      }
    },
    load() {
      // console.log("加载")
      // this.currentPage = this.currentPage + 1
      // this.getList()
    },
    beforeClose() {
      //取消时，关闭侧边栏
      this.$emit("close", "");
    },
    //跳转到文章详情
    goToInfo(uid) {
      let routeData = this.$router.resolve({
        path: "/info",
        query: {blogUid: uid}
      });
      window.open(routeData.href, '_blank');
    },
    //跳转到搜索详情页
    goToList(uid) {
      let routeData = this.$router.push({
        path: "/list",
        query: {sortUid: uid}
      });

    },
    //跳转到搜索详情页
    goToAuthor(author) {
      let routeData = this.$router.push({
        path: "/list",
        query: {author: author}
      });
    },
  }
}
</script>

<style scoped>

.blogsbox {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
}

.blogs {
  margin-bottom: 0px;
  padding: 20px;
}

.blogs .blogtext {
  margin-top: 0px;
}

.ng-scope {
  margin: 0 auto;
  width: 18%;
  height: 10%;
}

@keyframes lds-facebook_1 {
  0% {
    top: 0px;
    height: 200px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 0px;
    height: 200px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 20px;
    height: 160px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 20px;
    height: 160px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 40px;
    height: 120px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 40px;
    height: 120px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}

.lds-facebook {
  position: relative;
}

.lds-facebook div {
  position: absolute;
  width: 20px;
}

.lds-facebook div:nth-child(1) {
  left: 40px;
  background: #1d0e0b;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.lds-facebook div:nth-child(2) {
  left: 90px;
  background: #774023;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.lds-facebook div:nth-child(3) {
  left: 140px;
  background: #d88c51;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook {
  width: 90px !important;
  height: 90px !important;
  -webkit-transform: translate(-45px, -45px) scale(0.45) translate(45px, 45px);
  transform: translate(-45px, -45px) scale(0.45) translate(45px, 45px);
}
</style>
